<template>
  <div class='about-yan not-single about-single' id='not-app-article'>
    <div class='flex flex-col'>
      <div class='about-content'>
        <div class='relative'>
          <div class='header_box mb-6'>
            <div class="page-slogan">
              <rotating-text :words="words" width="3.4em" />
              <span class="ml-2.5"> 、而后风生水起</span>
            </div>
            <div class="page-slogan-sub mt-2.5">
              <rotating-text :words="words2" width="3.0em" />
              <span> 、say never</span>
            </div>
          </div>

          <div class='use-technology'>
            <section class=" section-part-module">
              <div class="s-container">
                <div class="section-module-cont">
                  <div class="section-module-img"></div>
                  <div class="section-module-card">
                    <section-card title="前端服务" icon="https://www.qiaoxiao.top/article.svg">
                      采用 Vue.js 实现一套 SSR 服务端渲染的博客系统。
                    </section-card>
                    <section-card title="导航资源" icon="https://www.qiaoxiao.top/home_resouse.svg">
                      前端添加友链链接、通过 cheeiro 爬取网站介绍、图片、文章等。
                    </section-card>
                    <section-card title="后台管理" icon="https://www.qiaoxiao.top/vuejs.svg">
                      采用vue2 + nodejs + element-ui 开发后台管理系统进行实时编辑。
                    </section-card>
                    <section-card title="接口开发" icon="https://www.qiaoxiao.top/docker.svg" >
                      使用SpringBoot作为开发框架、mysql 作为数据库、基于docker 实现自动化部署。
                    </section-card>
                    <section-card title="聊天互动" icon="https://www.qiaoxiao.top/chat.svg">
                      采用第三方服务开发的邮件通知、用于消息回复。
                    </section-card>
                  </div>
                </div>
              </div>
            </section>
          </div>

          <div v-if='about' class='about-myself fade-in'>
            <div class='about-info' v-html='about' ref='postRef'></div>
            <div class='info'>
              <a class='read' href='/agreement' target='_blank'>本站用户协议</a>
              <a class='more' href='/message'>留言</a>
              <a class='more' href='/archives' target='_blank'>文章隧道</a>
            </div>
            <div class='space'></div>
            <div class='stars'>
              <div class='stars-animation'>
                <div class='star-about top'></div>
                <div class='star-about center'></div>
                <div class='star-about bottom'></div>
              </div>
            </div>
          </div>
          <div v-else class='bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block min-h-screen'>
            <ob-skeleton tag='div' :count='1' height='36px' width='150px' class='mb-6' />
            <br />
            <ob-skeleton tag='div' :count='35' height='16px' width='100px' class='mr-2' />
            <br />
            <br />
            <ob-skeleton tag='div' :count='25' height='16px' width='100px' class='mr-2' />
          </div>
          <!-- amap -->
          <section class='amap' data-fancybox="div" data-src="#maps-hidden" data-slug="map">
            <h5 title='place'>位置</h5>
            <div id='maps-hidden' class='maps-area'>
              <div id='maps' class='amap-container' style='cursor: move; background-color: rgb(26, 35, 44);'></div>
            </div>
            <div class='info'>
              <a class='logo no-icon' target='_blank'>
                <img src='@/assets/about/f2cb96a7370436e9eb1a6052fcca9a389ff7073a.png' alt='place'>
              </a>
            </div>
          </section>
          <!-- amap -->
          <Comment :commentCount='commentCount' />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, onUnmounted, toRefs, ref, reactive, nextTick, provide, computed } from 'vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { useI18n } from 'vue-i18n'
import { useCommonStore } from '@/stores/common'
import { useCommentStore } from '@/stores/comment'
import Sticky from '@/components/Sticky.vue'
import { Comment } from '@/components/Comment'
import Prism from 'prismjs'
import '@/styles/prism-aurora-future.css'
import api from '@/api/api'
import emitter from '@/utils/mitt'
import { v3ImgPreviewFn } from 'v3-img-preview'
import markdownToHtml from '@/utils/markdown'
import ObSkeleton from '@/components/LoadingSkeleton/src/Skeleton.vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import RotatingText from '@/components/kit/RotatingText/index.vue'
import SectionCard from '@/components/kit/SectionCard/index.vue'

export default defineComponent({
  name: 'About',
  components: { SectionCard, RotatingText, ObSkeleton, Breadcrumb, Navigator, Sticky, Comment },
  setup() {
    const commonStore = useCommonStore()
    const commentStore = useCommentStore()
    const { t } = useI18n()
    const postRef = ref()
    const reactiveData = reactive({
      about: '' as any,
      comments: [] as any,
      haveMore: false as any,
      isReload: false as any,
      images: [] as any,
      commentCount: 0 as number
    })
    const pageInfo = reactive({
      current: 1,
      size: 7
    })
    commentStore.type = 3
    onMounted(() => {
      fetchComments()
      fetchAbout()
      createMap()
    })
    onUnmounted(() => {
      commonStore.resetHeaderImage()
    })
    provide(
      'comments',
      computed(() => reactiveData.comments)
    )
    provide(
      'haveMore',
      computed(() => reactiveData.haveMore)
    )
    emitter.on('aboutFetchComment', () => {
      pageInfo.current = 1
      reactiveData.isReload = true
      fetchComments()
    })
    emitter.on('aboutFetchReplies', (index) => {
      fetchReplies(index)
    })
    emitter.on('aboutLoadMore', () => {
      fetchComments()
    })
    //map
    const createMap = () => {
      AMapLoader.load({
        key: '59d16be1e17715bd30a45b36a3e07beb',
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType']
      }).then((Amap) => {
        const map:any = new Amap.Map('maps', {
          resizeEnable: true,
          scrollWheel: false,
          defaultCursor: 'move',
          mapStyle: 'amap://styles/grey',
          zoom: 16, //初始化地图层级
          center: [104.642889, 28.752321], //初始化地图中心点
          WebGLParams: {
            preserveDrawingBuffer: true
          }
        })
        map.addControl(new Amap.Scale({ position: { bottom: '0', left: '0' } }))
        map.addControl(new Amap.ToolBar({ position: { bottom: '0', right: '0' } }))
        map.addControl(new Amap.MapType({ position: { top: '0', left: '0' } }))
        map.add(new Amap.Marker({
          position: map.getCenter(),
          anchor: 'bottom-center',
          title: '宜宾市人民政府'
        }))
      }).catch(e => {
        console.log(e)
      })
    }
    const handlePreview = (index: any) => {
      v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
    }
    const fetchAbout = () => {
      api.getAbout().then(({ data }) => {
        data.data.content = markdownToHtml(data.data.content)
        reactiveData.about = data.data.content
        nextTick(() => {
          Prism.highlightAll()
        })
      })
    }
    const fetchComments = () => {
      const params = {
        type: 3,
        topicId: null,
        current: pageInfo.current,
        size: pageInfo.size
      }
      api.getComments(params).then(({ data }) => {
        reactiveData.commentCount = data.data.count
        if (reactiveData.isReload) {
          reactiveData.comments = data.data.records
          reactiveData.isReload = false
        } else if (data.data.records) {
          reactiveData.comments.push(...data.data.records)
        }
        reactiveData.haveMore = data.data.count > reactiveData.comments.length;
        pageInfo.current++
      })
    }
    const fetchReplies = (index: any) => {
      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
        reactiveData.comments[index].replyDTOs = data.data
      })
    }
    const words = [
      { label: '日益努力', color: '#2db7f5' },
      { label: '日益努力', color: '#38B9CC' },
      { label: '日益努力', color: '#49BC8D' },
      { label: '日益努力', color: '#6bc30d' }
    ]
    const words2 = [
      { label: 'Never', color: '#2db7f5' },
      { label: 'Never', color: '#38B9CC' },
      { label: 'Never', color: '#49BC8D' },
      { label: 'Never', color: '#6bc30d' }
    ]
    return {
      postRef,
      ...toRefs(reactiveData),
      t,
      words,
      words2
    }
  }
})
</script>

<style lang='scss'>
.use-technology {
  display: flex;
  justify-content: center;
  margin: 1.5rem auto;
  background: var(--h-bg);
}
.section-part-module .section-module-cont {
  align-items: center;
  display: flex;
  justify-content: center;
}
.section-part-module .section-module-cont .section-module-img {
  background-image: url(https://www.qiaoxiao.top/avater.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  border: 20px solid #c5c8ce;
  border-radius: 50%;
  flex: none;
  height: 200px;
  width: 200px;
}
.section-part-module .section-module-cont .section-module-card {
  overflow: hidden;
  padding-left: 140px;
  position: relative;
}
.section-card-head {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-slogan {
  padding: 0 30px;
  font-size: 40px;
  height: 50px;
  font-weight: normal;
  margin-bottom: 5px;
  color: #fff;
  user-select: none;
  display: flex;
  justify-content: center;
}
.page-slogan-sub {
  user-select: none;
  font-size: 32px;
  display: flex;
  justify-content: center;
}
.page-slogan-sub span,.page-slogan span{
  color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
}
.about-header {
  position: relative;
  background: var(--s-bg, rgba(0, 0, 0, 0.025));
  box-shadow: var(--box-shadow-white);
  border-radius: var(--radius);
  margin: 1rem 0;
  transition: all 1s, box-shadow .5s;
}

.amap .info a {
  opacity: 1;
}

.about-header:hover {
  box-shadow: var(--box-shadow-white), 0 0 0 2px rgb(255 255 255 / 40%);
}

.about-myself {
  background: linear-gradient(320deg, rgb(15 6 50 / 50%), rgb(17 0 84 / 50%), rgb(79 16 74));
  border-radius: var(--radius);
  padding: var(--gap-divs);
  min-height: 10rem;
  color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
  font: 400 1rem/2 var(--top-font-family);
  display: flex !important;
  flex-direction: column;
  text-align: justify;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  gap: var(--gap-divs);
  position: relative;
  overflow: hidden;
  transform: rotate(0deg);
  transition: all 1s, box-shadow .5s;
}

.about-myself :where(.info) {
  font-size: .75rem;
  flex: none;
  gap: var(--gap-span) var(--gap-divs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  opacity: .6;
  z-index: 2;
}

.fade-in {
  --trfm: scaleY(1.1) translateY(1rem);
  opacity: 1;
  animation: opacity var(--duration, .5s) var(--animation-in) backwards, transform var(--duration, .7s) var(--animation-in) backwards;
}

.about-content {
  font-family: var(--top-font-family);
}

.about-info {
  width: min(100%, 50rem);
  color: #ffffff;
  z-index: 2;
}

.about-info p {
  margin: 1.5em 0;
  font-size: .9rem;
  opacity: .6;
  line-height: 2.5;
}

.about-myself .info a {
  --color-rgb: 255 255 255;
  --color-sub-rgb: 255 255 255;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.info a {
  color: #FFFFFF;
}

.space {
  position: absolute;
  z-index: 1;
  width: 100%;
  border-radius: 50% 50% 0 0;
  transition: all .5s cubic-bezier(.5, 0, 0, 1);
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(5px);
  box-shadow: var(--box-shadow);
}

.about-myself .info .read {
  margin: 0 auto 0 0;
}

.about-myself a:after {
  font-family: iconfont;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: var(--icon-size);
  background: rgb(255 255 255 / .2);
  border-radius: 50%;
  text-align: center;
}

.about-myself .info a:not(.more)[target="_blank"]::after {
  content: "\e667";
}

.about-myself .info a.more::after {
  content: "\e645";
}

.stars {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotate(-145deg);
}

.stars-animation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  animation: about-stars 10s linear infinite;
}

.star-about {
  width: 5rem;
  height: 2px;
  background: linear-gradient(90deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 0%));
  display: flex;
  align-items: center;
}

.star-about:before {
  content: "";
  height: 2px;
  width: 2px;
  background: rgb(255 255 255);
  border-radius: 50%;
}

.star-about.center {
  margin: 0 0 0 100%;
}

.star-about.bottom {
  margin: 0 0 0 30%;
}

.about-use-tool {
  background: var(--s-bg, rgba(0, 0, 0, 0.025));
}

@media (min-width: 641px) {
  .space {
    height: auto;
    inset: 20% -40% auto auto;
    aspect-ratio: 1 / 1;
  }
  .about-myself:hover .space {
    width: 110%;
    top: 15%;
    right: -45%;
  }
}
@media (min-width: 0) and (max-width: 576px){
  .section-part-module .section-module-cont .section-module-img{
    display: none;
  }
  .section-part-module .section-module-cont .section-module-card{
    padding-left: 0;
    margin: 0 0.5em;
  }
  .page-slogan > span{
    display: none;
  }
}
@keyframes about-stars {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%)
  }
}

@keyframes about-title {
  0% {
    transform: scale(.95);
  }
  100% {
    transform: scale(1);
  }
}
</style>
